const path = require('path')

module.exports = {
  outputDir: 'dist', // build输出目录
  assetsDir: 'assets', // 静态资源目录（js, css, img）
  lintOnSave: true, // 是否开启eslint
  publicPath: './', // 解决项目打包出现空白页问题
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  css: {
    // 修改element-ui的默认样式，在_vars.scss中定义
    loaderOptions: {
      sass: {
        data: '@import "@/assets/styles/_vars.scss"; @import "~element-ui/packages/theme-chalk/src/common/var";'
      }
    }
  },
  chainWebpack: config => {
    // 配置代理路径
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('services', path.resolve(__dirname, './src/services'))
      .set('utils', path.resolve(__dirname, './src/utils'))

    // 使用externals设置排除项，引用外部CND
    config.set('externals', {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      'element-ui': 'ELEMENT',
      nprogress: 'NProgress'
    })
  },
  // 警告 webpack 的性能提示
  configureWebpack: {
    performance: { // 性能调优
      hints: 'warning',
      // 入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  },
  // 开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 8888,
    proxy: {
      '/api': {
        // 本地服务接口地址
        target: 'https://jsonplaceholder.typicode.com/',
        ws: true,
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}
